<?php
	//require './classes.php';
	//require './config/config.php';
	
	//$cDB = new pmtDatabase();
	//$cDB->connect($dbHost,$dbUser,$dbPass,$dbName);
	
	//rest of select etc.
	
	//$cDB->close();
	
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Cp1252">
<title>Proomeetheejus Dek</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

<script>
$( document ).ready(function() {


	/*
	$( ".stack" ).each(function() {

		var marginLeft = 0;
			$(this).children('.card').each(function(){


				
				$(this).css("margin-left",marginLeft);
				marginLeft = marginLeft+10
				
				
			});

	});

	*/
	  
	    $( ".stackList" ).sortable({
	      connectWith: ".stackList"
	    }).disableSelection();
	  

	   
});
	
</script>

<style>
	
	html,body{
		margin:0;
		padding:0;
	}
	
	
	#container
	{
		margin:0;
		padding:0;
		background-color:#0000FF;
		height:100%;
		width:auto;
	}
	
	.decksOverview
	{
		margin:100px;
		height:100%;
		width:auto;
	}
	/*
	.deck
	{
		width:250px;
		height:180px;
		float:left;
		margin-right:50px;
		
		background-color:#FFF;
		
		border-color:rgba(50, 50, 50, 0.75);
		border:solid 2px;
		
		-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}
	*/
	
	
	
	
	
	
	.decksOverview
	{
		margin:100px;
		height:100%;
		width:auto;
	}
	
	
	.stackContainer
	{
		float:left;
		margin:5px;
		padding:0;
		width:282px;
	}
	
	.stackList
	{
		margin-right:100px;
		border:solid 2px rgba(50, 50, 50, 0);
		height:auto;
		width:270px;
		padding:10px;
		float:left;
		
		 list-style-type: none;
	}
		.stackHeader
		{
			height:20px;
			width:auto;
			margin-bottom:40px;
			padding-left:10px;
		}
		
		
	
	.card
	{
		width:250px;
		height:180px;
		
		background-color:#FFF;
		
		border-color:rgba(50, 50, 50, 0.75);
		border:solid 2px;
		
		padding:10px;
		
		-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}
		.cardName
		{
			font-weight:bold;
			text-align:center;
		}
		
		.cardShortDescription
		{
			text-align:justify;
		}
		
		
	
	.cardInStack
	{
		margin-top:-50px;
	}
		.first{
			background-color:#00FFFF;
		}
	
		.red
			{
				background-color:#FF0000;
			}
			
			.green
			{
				background-color:#00FF00;
			}
			
			.yellow
			{
				background-color:#FFFF00;
			}

</style>


</head>
    <body>
    	
    	
    	
    	
    	

	<div id="container">
		&nbsp;
		<!-- 
		<div class="decksOverview">
			<div class="deck">
			
			</div>
			<div class="deck">
			
			</div>
			<div class="deck">
			
			</div>
		</div>
		-->
		
		<div class="decksOverview">
		
			<div class="stackContainer">
				<div class="stackHeader red">
					Draft
				</div>
				
			
				<ul class="stackList" id="stack1">
					
				
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Quisque venenatis turpis augue, at vehicula nisl malesuada nec. Mauris vulputate id tellus vitae imperdiet. 
						</div>
					
					</li>
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
						
					
					
					</li>
					
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
				</ul>
			</div>
			
			<div class="stackContainer">
			
				<div class="stackHeader green">
						Phone
					</div>
				
				<ul class="stackList" id="stack2">
					
					
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
				</ul>
			</div>
			<div class="stackContainer">
			
				<div class="stackHeader yellow">
					Ice Tea
				</div>
			
				<ul class="stackList" id="stack3">
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
					<li class="card cardInStack">
						<div class="cardName">
							Lorum
						</div>
						<div class="cardShortDescription">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vulputate neque ac iaculis. 
						</div>
					</li>
				</ul>
			
			</div>
			
			
			<div class="stackContainer">
			
				<div class="stackHeader">
					
				</div>
				<ul  class="stackList" id="stack4">
					
				</ul>
			</div>
			
			
			
		</div>

</div>

    	
    	
    	
    	
    	
    </body>
</html>